<template>
	<view class="tui-searchbar__box" :style="{ width: width, backgroundColor: backgroundColor, padding: padding }">
		<view class="tui-search-bar__form" :style="{ height: height }">
			<view class="tui-search-bar__box" :style="{ height: height, borderRadius: radius, backgroundColor: inputBgColor }" v-if="showInput">
				<icon class="tui-icon-search" type="search" :size="13"></icon>
				<input
					type="text"
					class="tui-search-bar__input"
					:placeholder="placeholder"
					:value="valueTxt"
					:focus="isFocus"
					:disabled="disabled"
					confirm-type="search"
					@blur="inputBlur"
					@focus="inputFocus"
					@input="inputChange"
					@confirm="search"
				/>
				<icon type="clear" :size="15" class="tui-icon-clear" v-if="valueTxt.length > 0 && !disabled" @tap.stop="clearInput"></icon>
			</view>

			<label
				class="tui-search-bar__label"
				:style="{ height: height, borderRadius: radius, backgroundColor: inputBgColor }"
				v-if="!isFocus && !searchState && showLabel"
				@tap="tapShowInput"
			>
				<icon class="tui-icon-search" type="search" :size="13"></icon>
				<text class="tui-search-bar__text">{{ placeholder }}</text>
			</label>
		</view>

		<view v-if="cancel && searchState && !valueTxt" class="tui-search-bar__cancel-btn" :style="{ color: cancelColor }" @tap="hideInput">{{ cancelText }}</view>
		<view v-if="valueTxt && !disabled && searchState" class="tui-search-bar__cancel-btn" :style="{ color: searchColor }" @tap="search">{{ searchText }}</view>
	</view>
</template>

<script setup>
import { ref, reactive, toRefs, watch, onBeforeMount } from 'vue'

const emit = defineEmits(['clear', 'focus', 'blur', 'click', 'cancel', 'input', 'search'])

const props = defineProps({
	//搜索栏背景色
	backgroundColor: {
		type: String,
		default: '#ededed'
	},
	//搜索栏padding
	padding: {
		type: String,
		default: '8px 10px'
	},
	//input框宽度
	width: {
		type: String,
		default: '100%'
	},
	//input框高度
	height: {
		type: String,
		default: '36px'
	},
	radius: {
		type: String,
		default: '4px'
	},
	//input框背景色
	inputBgColor: {
		type: String,
		default: '#fff'
	},
	focus: {
		type: Boolean,
		default: false
	},
	placeholder: {
		type: String,
		default: '请输入搜索关键词'
	},
	value: {
		type: String,
		default: ''
	},
	//input是否禁用
	disabled: {
		type: Boolean,
		default: false
	},
	cancelText: {
		type: String,
		default: '取消'
	},
	cancelColor: {
		type: String,
		default: '#888'
	},
	cancel: {
		type: Boolean,
		default: true
	},
	searchText: {
		type: String,
		default: '搜索'
	},
	searchColor: {
		type: String,
		default: '#5677fc'
	},
	//是否显示占位标签
	showLabel: {
		type: Boolean,
		default: true
	},
	//是否显示输入框
	showInput: {
		type: Boolean,
		default: true
	}
})

const state = reactive({
	searchState: false,
	isFocus: false,
	valueTxt: ''
})

onBeforeMount(() => {
	state.valueTxt = props.value
	state.isFocus = props.focus
	if (props.focus || state.valueTxt.length > 0) {
		state.searchState = true
	}
})

watch(
	() => props.value,
	nVal => {
		state.valueTxt = nVal
	}
)

const clearInput = () => {
	state.valueTxt = ''
	// #ifdef MP-TOUTIAO || MP-WEIXIN
	state.isFocus = false
	uni.hideKeyboard()
	// #endif

	// #ifndef MP-TOUTIAO || MP-WEIXIN
	state.isFocus = true
	// #endif
	emit('clear')
}

const inputFocus = e => {
	if (!props.showLabel) {
		state.searchState = true
	}
	emit('focus', e.detail)
}

const inputBlur = e => {
	state.isFocus = false
	emit('blur', e.detail)
}

const tapShowInput = () => {
	if (!props.disabled && props.showInput) {
		state.searchState = true
		setTimeout(() => {
			state.isFocus = true
		}, 20)
	}
	emit('click', {})
}

const hideInput = () => {
	state.searchState = false
	state.isFocus = false
	uni.hideKeyboard()
	emit('cancel', {})
}

const inputChange = e => {
	state.valueTxt = e.detail.value
	emit('input', e.detail)
}

const search = () => {
	emit('search', {
		value: state.valueTxt
	})
}

const { searchState, isFocus, valueTxt } = toRefs(state)
</script>

<style lang="scss" scoped>
.tui-searchbar__box {
	width: 100%;
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
}

.tui-search-bar__form {
	position: relative;
	flex: 1;
}

.tui-search-bar__box {
	width: 100%;
	padding-left: 10px;
	padding-right: 8px;
	box-sizing: border-box;
	z-index: 1;
	display: flex;
	align-items: center;
}

.tui-search-bar__box .tui-search-bar__input {
	padding: 0 8px;
	width: 100%;
	border: 0;
	font-size: 14px;
	box-sizing: content-box;
	background: transparent;
}

.tui-search-bar__box .tui-search-bar__input:focus {
	outline: none;
}

.tui-search-bar__box .tui-icon-search {
	flex-shrink: 0;
}

.tui-search-bar__box .tui-icon-clear {
	margin-left: 2px;
	flex-shrink: 0;
}

.tui-search-bar__label {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	font-size: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-search-bar__cancel-btn {
	font-size: 15px;
	margin-left: 8px;
	line-height: 28px;
	white-space: nowrap;
	flex-shrink: 0;
}

.tui-search-bar__text {
	display: inline-block;
	font-size: 14px;
	vertical-align: middle;
	padding-left: 12rpx;
	color: rgba(0, 0, 0, 0.5);
}
</style>
